<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>边距</title>
    <style type="text/css">
    div {
        width: 300px;
        height: 300px;
        border: 1px solid red;
    }
    #box1{
        margin-bottom:30px;
    }
    </style>
</head>

<body>
    <div id="box1">box1</div>
    <div id="box2">box2</div>
</body>

</html>
<!-- 元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：

div{margin:20px 10px 15px 30px;}

也可以分开写：

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
} -->

<!-- 
如果上右下左的边界都为10px;可以这么写：

div{ margin:10px;}
 -->

 <!-- 
如果上下边界一样为10px，左右一样为20px，可以这么写：

div{ margin:10px 20px;}
 -->

<!-- 总结一下：padding和margin的区别，padding在边框里，margin在边框外。 -->